import react from 'react'
import axios from 'axios'
import './app.css'
class App extends react.Component {
  constructor() {
    super()
    this.state = {
      list: [],
      rooms: []
    }
  }
  componentWillMount() {
    axios.get('/cate/recList?cid=&ct=').then(res => {
      // console.log(res)
      this.setState({
        list: res.data.data
      })
    })
  }
  // 请求房间列表数据的函数
  getRooms = (type) => {
    axios.get('/room/list?page=1&type=' + type).then(res => {
      // console.log(res)
      this.setState({
        rooms: res.data.data.list
      })
    })
  }
  render() {
    return (
      <div className="App">
        <ul className="navList">
          {
            this.state.list.map((item, index) => {
              return <li key={index} onClick={this.getRooms.bind(this, item.shortName)}>{item.name}</li>
            })
          }
        </ul>
        <ul>
          {
            this.state.rooms.map((item, index) => {
              return <li key={index}>
                <img src={item.roomSrc} />
              </li>
            })
          }
        </ul>
      </div>
    );
  }
}
export default App;
